<template>
  <div class="uploadAwesomeVideoInfo">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="uploadAwesomeVideoInfoParam" :rules="rules" size="medium"
        label-width="100px">
        <el-col :span="16">
          <el-row>
            <!-- 辅助工具：视频信息入库 -->
            <el-col :span="8">
              <el-form-item label="视频分类" prop="myVideoClass">
                <el-select v-model="uploadAwesomeVideoInfoParam.myVideoClass" placeholder="请选择视频分类" clearable
                  :style="{width: '100%'}">
                  <el-option v-for="(item, index) in classifiedOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="视频标签" prop="myTagsCn">
                <el-select v-model="uploadAwesomeVideoInfoParam.myTagsCn" placeholder="请选择视频标签" clearable
                  :style="{width: '100%'}">
                  <el-option v-for="(item, index) in tagsOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
            </el-col>
            <el-col :span="7">
              <el-form-item label-width="0" prop="uploadAwesomeVideoInfo" required>
                <el-upload ref="uploadAwesomeVideoInfo" :file-list="uploadAwesomeVideoInfofileList"
                  :action="uploadAwesomeVideoInfoAction" :auto-upload="true"
                  :headers="myHeaders"
                  :multiple="false"
                  :data="uploadAwesomeVideoInfoParam"
                  :before-upload="uploadAwesomeVideoInfoBeforeUpload">
                  <el-button size="small" type="primary" icon="el-icon-upload">视频信息入库</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 视频处理 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label-width="0" prop="crawl_video_">
                <el-button type="primary" icon="el-icon-download" size="medium" @click="crawl_video"> 爬取视频 </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="0" prop="android2pc_">
                <el-button type="primary" icon="el-icon-edit-outline" size="medium" @click="android2pc"> 视频拷至PC </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import store from "@/store"; // progress bar style
import request from "@/router/axios";

export default {
  components: {},
  props: [],
  data() {
    return {
      crawl_video_: undefined,
      android2pc_: undefined,
      uploadAwesomeVideoInfoParam: {
        myVideoClass: "unclassified",
        myTagsCn: "cosplay",
      },
      rules: {
        classified: [{
          required: true,
          message: '请选择视频分类',
          trigger: 'change'
        }],
        tags: [{
          required: true,
          message: '请选择视频标签',
          trigger: 'change'
        }],
      },
      uploadAwesomeVideoInfoAction: 'http://localhost:8080/myvideos/myvideos/saveAll',
      uploadAwesomeVideoInfofileList: [],
      myHeaders: {Authorization: "Bearer " + store.getters.access_token},
      classifiedOptions: [{
        "label": "cosplay",
        "value": "cosplay"
      }, {
        "label": "travel",
        "value": "travel"
      }, {
        "label": "TwoDimension",
        "value": "TwoDimension"
      }, {
        "label": "unclassified",
        "value": "unclassified"
      }],
      tagsOptions: [{
        "label": "cosplay",
        "value": "#cosplay #小姐姐"
      }, {
        "label": "TwoDimension",
        "value": "#二次元 #卡点"
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    uploadAwesomeVideoInfoBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 4
      if (!isRightSize) {
        this.$message.error('文件大小超过 4MB')
      }
      return isRightSize
    },
    submitUpload() {
      console.log('==============')
      this.$refs['uploadAwesomeVideoInfo'].submit()
    },
    crawl_video() {
      
      return request({
        url: '/myvideos/myvideos/crawlVideo',
        method: 'post',
        timeout: 6 * 60 * 1000
      })
      .then((data) => {
        console.log(data)
        if (data.data.data) {
          this.$notify.success("成功了");
          // 重新获取视频数据的各种属性
          this.getDataList();
        } else {
          this.$notify.warning("失败了");
        }
      })
      .catch(() => {
        this.$notify.warn("异常");
      });
    },
    android2pc() {
      return request({
        url: '/myvideos/myvideos/android2pc',
        method: 'post',
        timeout: 1 * 60 * 1000
      })
      .then((data) => {
        console.log(data)
        if (data.data.data) {
          this.$notify.success("成功了");
          // 重新获取视频数据的各种属性
          this.getDataList();
        } else {
          this.$notify.warning("失败了");
        }
      })
      .catch(() => {
        this.$notify.warn("异常");
      });
    },
  }
}

</script>

<style>
.el-upload__tip {
  line-height: 1.2;
}

.uploadAwesomeVideoInfoParam {
  padding: 20px 10px;
}
</style>
